// /主页/
import React, { Component } from 'react'
import { NavBar, Carousel, Flex } from 'antd-mobile'
import 'lib-flexible'
import SearchInput from "../searchinput/SearchInput"
import './index.css'
import { withRouter } from "react-router-dom"
// import axios from "axios"
import myaxios from "../../utils/myaxios"
import axios from "axios"
class Index extends Component {
    constructor(props){//复用一下父类的构造函数
super(props)

    }
    state = {//设置状态用于渲染，
        swiper_list: [],
        imgHeight: 170,
        catitems: [],
        productData: []// 图片列表的数据
    }
    //  轮播图点击事件
    handleSwiperClick = (goods_id) => {
        //图片id
        this.props.history.push("/goodDetail/" + goods_id);
    }
    //  分类导航图片击事件
    handleCatItemClick = (params) => {
        this.props.history.push("/categort")
    }
    handleImgClick = () => {
        this.props.history.push("/goodList/query='123'")
    }
    // componentDidMount(){
    //     // 首页轮播图数据
    //     axios.get("https://www.linweiqin.cn/api/public/v1/home/swiperdata").then(res=>{
    //         console.log(res);
    //         this.setState({
    //             swiper_list:res.data.message,
    //             //通过打印得知数据在data.message（图片地址和ID）
    //         })
    //     })
    // }
    componentDidMount() {
        myaxios.get("home/swiperdata").then((res) => {
            console.log(res);
            this.setState({
                swiper_list: res,
            })
        })
            .catch((err) => console.log(err))

        myaxios.get("/home/catitems").then((res) => {

            console.log(res);
            this.setState({
                catitems: res
            })
        })
        /* 首页图片列表 数据*/
        myaxios.get("/home/floordata").then(res => {
            this.setState({
                productData: res
            })
        })
    }

    render() {
        return (
            <div className="yg-index">
                <div className=" yg-index-nav">
                    <NavBar className="index-nav">
                        优购商城
            </NavBar>

                </div>
                {/* {搜素框开始} */}
                <div className="yg-index-search">
                    <SearchInput>

                    </SearchInput>
                </div>
                {/* {搜素框结束} */}

                <div className="yg-index-swiper">
                    {/* 轮播图 */}

                    <Carousel
                        autoplay={true}
                        infinite

                    >
                        {this.state.swiper_list.map((val) => (
                            <div
                                onClick={this.handleSwiperClick.bind(this, val.goods_id)}
                                key={val.goods_id}


                                style={{
                                    display: 'inline-block', width: '100%',
                                    height: this.state.imgHeight
                                }}
                            >
                                <img
                                    src={val.image_src}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </div>
                        ))}
                    </Carousel>
                </div>
                {/* 分类的开始 */}
                {/* 首页轮播图结束 */}
                {/* 首页分类导航开始 */}
                <div className="yg-index-catitems">
                    <div className="catitems-item">
                        <Flex>
                            {
                                this.state.catitems.map(v => {
                                    return <Flex.Item key={v.image_src} onClick={this.handleCatItemClick}>
                                        <img src={v.image_src} alt="" />
                                    </Flex.Item>
                                })
                            }
                        </Flex>
                    </div>
                </div>

                {/* 首页分类导航结束 */}
                {/* 首页图片列表开始 */}
                <div className="yg-index-productData">
                    {
                        this.state.productData.map(v => {
                            return <div key={v.floor_title.image_src} className="productData-item">
                                {/* 标题开始 */}
                                <div className="product-title">
                                    <img src={v.floor_title.image_src} alt="" />
                                </div>
                                {/* 图片列表的开始 */}
                                <div className="product-image-list">
                                    {
                                        v.product_list.map(vv => {
                                            return <div className="image-list-item" key={vv.image_src} onClick={this.handleImgClick}>
                                                <img src={vv.image_src} alt="" />
                                            </div>
                                        })
                                    }


                                </div>
                                {/* 标题结束 */}
                            </div>
                        })
                    }

                </div>
            </div>
        )
    }
}
export default withRouter(Index)